<template>
	<view class="wp">
		<nav-public :title="' '" :background="'transparent'" :color="'white'" :isTransparent="true"></nav-public>
		<swiper vertical duration="200" @change="changed" style="height:100%">
			<swiper-item v-for="(item,index) in list">
				<view class="video">
					<video :src="item.vodurl" :id="'myvideo'+index" controls="false" loop="true" show-fullscreen-btn="false" show-center-play-btn="false" show-play-btn="false"></video>
				</view>
				<view class="position">
					<view class="address">
						<view>{{item.supplier.shortaddress}}</view>
						<view class="line" v-if="item.supplier.shortaddress&&item.supplier.shortaddress!=''"></view>
						<view>{{item.supplier.supname}}</view>
					</view>
					<view class="headtit">{{item.title}}</view>
					<view class="goods" @click="$navTo('./groupbuy?id='+item.id)">
						<image :src="item.thumb"></image>
						<view class="info">
							<view class="head">
								<view class="tit clamp">{{item.title}}</view>
								<view class="head_sub">
									<image src="/static/index/dizhi.png" mode="widthFix"></image>
									<view>{{item.supplier.length}}</view>
								</view>
							</view>
							<view class="tag">已售{{item.sales||0}}</view>
							<view class="price">
								<view class="flex_align_center">
									<view class="new">￥{{item.saleprice}}</view>
									<view class="old">￥{{item.productprice}}</view>
								</view>
								<view class="btn" @click.stop="toBuy(item)">立即购买</view>
								<!-- <view class="btn" @click.stop="toBuy(item)" v-if="item.canbuy==1">立即购买</view>
								<view class="btn opacity5" v-else>暂无法购买</view> -->
							</view>
						</view>
					</view>
				</view>	
				<view class="right_content">
					<button open-type="share" class="right_item" >
						<uni-icons type="redo-filled" size="26" color="#fff"></uni-icons>
						<view>分享</view>
					</button>
				</view>
			</swiper-item>
		</swiper>
		<group-popup v-show="popu" :info="info" @tobuy="closePop" @tobuyReal="toBuyReal"/>
		<!-- 右侧 -->
		<view class="video_tip" v-if="isTip">
			<image src="/static/up.png" mode="widthFix"></image>
			<view>向上滑动可查看更多视频</view>
		</view>
		<view class="gomask" v-if="isMask">
			<view class="maskTit">
				<view>点击下方，前往小程序</view>
				<image src="/static/zhixiang.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import groupPopup from './groupPopup.vue';
	export default {
		data() {
			return {
				id: 0,
				mid: 0,
				info: [],
				popu: false,
				page:0,
				list: [],
				isTip: false,
				isMask: false,
			};
		},
		components: { groupPopup },
		computed: {
		  	...mapState(['Location'])
		},
		async onLoad(options){
			if (options.id) {
				this.id = options.id;
			}
			if(options.mid){
				uni.setStorageSync('mid',options.mid);
				this.mid = options.mid;
			}
			if(uni.getLaunchOptionsSync().scene == 1154){
				this.isMask = true;
			}else{
				this.isMask = false;
			}
			// await this.$onLaunched;
			this.getInfo();
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
			this.getList();
			let number = uni.getStorageSync('videoTip');
			if(number){
				if(number>=2){
					this.isTip = false;
				}else{
					number++;
					uni.setStorageSync('videoTip',number);
					this.isTip = true;
				}
			}else{
				uni.setStorageSync('videoTip',1);
				this.isTip = true;
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			changed(e){
				this.isTip = false;
				const videoContextOld = uni.createVideoContext('myvideo'+(e.detail.current-1), this);//暂停上一个
				videoContextOld.pause();
				const videoContextOld1 = uni.createVideoContext('myvideo'+(e.detail.current+1), this);//暂停下一个
				videoContextOld1.pause();
				const videoContext = uni.createVideoContext('myvideo'+e.detail.current, this);//播放当前
				videoContext.play();
				this.getShareConfig(this.list[e.detail.current].id)
				// 划到加载的最后一个视频
				if(e.detail.current==this.list.length-1){
					this.getList();
				}
			},
			// 获取分享配置
			getShareConfig(id){
				this.$axios('WxInfo/getConfig', 'POST', 'shop', {
					url: '/pages/product/videoDetail?id='+id,
					type:'goodsvod',
					cid: id
				}).then(res => {
					if (res.data.code == 200) {
						if(res.data.data.shareinfo.title){
							this.title = res.data.data.shareinfo.title;
						}
						this.path = res.data.data.shareinfo.url;
						this.query = res.data.data.shareinfo.url.split('?')[1];
						this.imageUrl = res.data.data.shareinfo.imgurl;
					}
				})
			},
			getList(){
				this.page++;
				let obj = {
					...this.Location,
					...{
						page: this.page
					}
				}
				this.$axios('groupgoods/goodsVodlist','POST','shop',obj).then(res=>{
					if(res.data.code == 200){
						this.list = [...this.list,...res.data.data];
						if(res.data.data.length<=0) return this.$api.msg('已经是最后一个视频了~');
					}
				})
			},
			// 关闭弹出框
			closePop() {
				this.popu = !this.popu
			},
			toBuy(item){
				this.info = item;
				this.id = item.id;
				this.popu = !this.popu
			},
			toBuyReal(number){
				let isGroupBuy;//是否为团购商品 1为团购 2为次卡
				if (!uni.getStorageSync('token')) {
					this.$refs.popup.open();
					return;
				}
				if(this.info.isstore==1){
					uni.navigateTo({
						url: '/pages/order/createOrder?type=3&id='+this.id+'&optionid=0&total='+number+'&isGroupBuy=1'
					})
				}else{
					uni.navigateTo({
						url: '/pages/order/createOrder?type=2&id='+this.id+'&optionid=0&total='+number+'&isGroupBuy=1'
					})
				}
			},
			getToken(){
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				    scopes: 'auth_base',
				    success: res => {
						this.$axios('login/autologinAliPay','POST','member',{
							mid: this.mid,
							code: res.authCode
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getSharePath();
							}
						})
					}
				})
				// #endif
			},
			getInfo() {
				let obj = {
					...this.Location,
					...{
						id: this.id
					}
				}
				this.$axios('groupgoods/goodsInfo', 'POST', 'shop', obj).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.list.unshift(res.data.data);
						setTimeout(()=>{
							const videoContext = uni.createVideoContext('myvideo0', this);
							videoContext.play();
							setTimeout(()=>{
								this.isTip = false;
							},3000)
						},500)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	.wp{
		width: 100%;
		height: 100%;
	}
	.video_tip{
		width: 100%;
		height: 160rpx;
		position: absolute;
		left: 0;
		right: 0;
		// top: 0;
		bottom: 500rpx;
		margin: auto;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		image{
			width: 100rpx;
			margin-bottom: 12rpx;
		}
	}
	.back-btn{
		position: fixed;
		top: calc(var(--status-bar-height) + 30rpx);
		left: 20rpx;
		z-index: 9999;
	}
.video{
	width: 100%;
	height: 100%;
	video{
		width: 100%;
		height: 100%;
	}
}
.headtit{
	color: #fff;
	margin-bottom: 20rpx;
}
.position{
	position: fixed;
	bottom: 80rpx;
	padding: 20rpx;
	left: 0;
	right: 0;
	margin: auto;
	.address{
		font-size: 24rpx;
		color: #FFFFFF;
		width: fit-content;
		background: #000000;
		border-radius: 12rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		opacity: 0.6;
		.line{
			width: 2rpx;
			height: 22rpx;
			background: rgba(255,255,255,.5);
			margin: 0 18rpx;
		}
	}
}
.right_content{
	position: absolute;
	right: 30rpx;
	bottom: 46%;
	color: #fff;
	font-weight: bold;
	.right_item{
		text-align: center;
		font-size: 30rpx;
		background: transparent;
		line-height: 40rpx;
		color: #fff;
		padding: 0;
		&::after{
			border: 0;
		}
	}
}
.goods{
	background: #fff;
	padding: 20rpx;
	// width: 94%;
	display: flex;
	justify-content: space-between;
	border-radius: 12rpx;
	image{
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}
	.info{
		width: calc(100% - 130rpx);
		padding-left: 20rpx;
		display: flex;
	    flex-direction: column;
	    justify-content: space-between;
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.head_sub{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				image{
					width: 14rpx;
					margin-right: 6rpx;
				}
			}
		}
		.tag{
			font-size: 20rpx;
			color: #999999;
		}
		.price{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.new{
				color: #AF141D;
				font-weight: bold;
				margin-right: 10rpx;
			}
			.old{
				color: #999999;
				font-size: 20rpx;
				text-decoration: line-through;
			}
			.btn{
				padding: 10rpx 30rpx;
				background: linear-gradient( 90deg, #B82DF1 0%, #8916E1 100%);
				color: #fff;
				text-align: center;
				border-radius: 28rpx;
			}
		}
	}
}
</style>
